<template>
  <div ref="chart" style="height: 300px"></div>
</template>

<script>
import * as echarts from "echarts/core";
import http from "@/api/http";

export default {
  data() {
    return {
      chartData: [],
      uname_list: [],
      task_total_list: [],
    };
  },
  mounted() {
    this.initChart();
    this.ordersfun();
  },
  beforeUnmounted() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    // 每个维修师傅的接单数量
    ordersfun() {
      http
        .get("/baoxiu/orders_num")
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    async initChart() {
      const chart = echarts.init(this.$refs.chart);
      this.chartInstance = chart; // 保存 chart 实例

      // 使用箭头函数确保 this 指向 Vue 实例
      // window.addEventListener("resize", () => {
      //   chart.resize();
      // });

      const response = await http.get("/baoxiu/orders_num");
      this.chartData = response.data;
      this.uname_list = response.data.map((item) => item.uname);
      this.task_total_list = response.data.map((item) => item.task_total);
      const option = {
        tooltip: {},
        title: {
          text: "维修师傅派单统计",
        },
        xAxis: {
          type: "category",
          data: this.uname_list,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.task_total_list,
            type: "line",
            smooth: true, // 开启平滑曲线
          },
        ],
        label: {
          show: true, // 显示标签
          position: "top", // 标签的位置
          formatter: "{c}", // 标签的内容，{c} 表示系列数据的数值
        },
      };

      chart.setOption(option);
    },
  },
};
</script>